<?php

?>
<html>
  <head>
    <link rel="stylesheet" href="./resources/lib/element-ui.css">
    <link rel="stylesheet" href="./resources/lib/install.css">
    <script src="./resources/lib/vue.js"></script>
    <script src="./resources/lib/element-ui.js"></script>
    <script src="./resources/lib/jquery.js"></script>
  </head>
  <body>
  <div class="installHeaderBox">EasyD_OA 指导安装程序</div>
  <div id="installApp">
    <div class="installBox">
      <div class="installProgressBox">
      <el-steps :active="installSetpValue" align-center>
        <el-step title="步骤1" description="环境检测,检查安装OA所需的各类语言环境，模块是否满足"></el-step>
        <el-step title="步骤2" description="检测各个主要目录的写入权限，保证数据可以正常写入"></el-step>
        <el-step title="步骤3" description="配置数据库相关信息，确保可以进行相关的安装工作"></el-step>
        <el-step title="步骤4" description="准备安装"></el-step>
        <el-step title="步骤4" description="安装完成"></el-step>
      </el-steps>
      </div>
        <div class="installContent installSetp_5" style="display:none;">
          <div class="successimageBox">
            <img src="./resources/images/chenggong.png" />
            <p>恭喜您，安装完成</p>
          </div>
          <div class="successInfoBox">
            <div class="successInfoTitle">操作提示</div>
            <div class="successInfoContent">
              您已完成安装，您可以进入目录XXX，点击项目启动脚本，来完成项目的启动，启动成功后，可以进行项目的访问，本项目为前后端分离项目，保证后端全部启动完成后，请将前端项目放置在您需要放置的目录中直接进行访问即可.
            </div>
          </div>
        </div>
        <div class="installContent installSetp_4" style="display:none;">
          <img src="./resources/images/anzhuang.png" />
          <p>所有步骤检查完成，您可以开始进行安装了</p>
        </div>
        <div class="installContent installSetp_3" style="display:none;">
          <div class="installContentItem">
                <div class="installType">数据库地址</div>
                <div class="installExists" style="width:59%;"><input type="text" id="db_url"  placeholder="请输入数据库地址" /></div>
          </div>
          <div class="installContentItem">
                <div class="installType">数据库帐号</div>
                <div class="installExists" style="width:59%;"><input type="text" id="db_username"  placeholder="请输入数据库帐号" /></div>
          </div>
          <div class="installContentItem">
                <div class="installType">数据库密码</div>
                <div class="installExists" style="width:59%;"><input type="text" id="db_password"  placeholder="请输入数据库密码" /></div>
          </div>
          <div class="installContentItem">
                <div class="installType">数据库名称</div>
                <div class="installExists" style="width:59%;"><input type="text" id="db_name"  placeholder="请输入数据库名称" /></div>
          </div>
          <div class="installContentItem">
                <div class="installType">数据库端口号</div>
                <div class="installExists" style="width:59%;"><input type="text" id="db_port"  placeholder="请输入数据库端口号" /></div>
          </div>
    </div>
        <div class="installContent installSetp_2" style="display:none;">
            <div class="installContentItem">
              <div class="installType">/bussiness</div>
              <?php if(is_writable("../business")){ ?>
                <div class="installExists yesIntall">可写</div>
              <?php }else{ ?>
                <div class="installExists noIntall">不可写</div>
              <?php }  ?>
              <div class="installDoc" style="color:#999">确保可写</div>
            </div>
            <div class="installContentItem">
              <div class="installType">/cache</div>
              <?php if(is_writable("../cache")){ ?>
                <div class="installExists yesIntall">可写</div>
              <?php }else{ ?>
                <div class="installExists noIntall">不可写</div>
              <?php }  ?>
              <div class="installDoc" style="color:#999">确保可写</div>
            </div>
            <div class="installContentItem">
              <div class="installType">/config</div>
              <?php if(is_writable("../config")){ ?>
                <div class="installExists yesIntall">可写</div>
              <?php }else{ ?>
                <div class="installExists noIntall">不可写</div>
              <?php }  ?>
              <div class="installDoc" style="color:#999">确保可写</div>
            </div>
            <div class="installContentItem">
              <div class="installType">/api</div>
              <?php if(is_writable("../api")){ ?>
                <div class="installExists yesIntall">可写</div>
              <?php }else{ ?>
                <div class="installExists noIntall">不可写</div>
              <?php }  ?>
              <div class="installDoc" style="color:#999">确保可写</div>
            </div>
        </div>
        <div class="installContent installSetp_1">
            <div class="installContentItem">
              <div class="installType">NodeJs</div>
              <div class="installExists">/</div>
              <div class="installDoc"><a href="#">安装参考</div>
            </div>
            <div class="installContentItem">
              <div class="installType">NodeJs -> Forever (守护进程）</div>
              <div class="installExists">/</div>
              <div class="installDoc"><a href="#">安装参考</a></div>
            </div>
            <div class="installContentItem">
              <div class="installType">Php模块 -> Mysqli</div>
              <?php if(function_exists('mysqli_connect')){ ?>
                <div class="installExists yesIntall">已安装</div>
              <?php }else{ ?>
                <div class="installExists noInstall">未安装</div>
              <?php }  ?>
            </div>
            <div class="installContentItem">
              <div class="installType">Php模块 -> CURL</div>
              <?php if(function_exists('curl_init')){ ?>
                <div class="installExists yesIntall">已安装</div>
              <?php }else{ ?>
                <div class="installExists noInstall">未安装</div>
              <?php }  ?>
            </div>
            <div class="installContentItem">
              <div class="installType">Apache模块 -> mod_rewrite</div>
              <?php if(function_exists('apache_get_modules')){ ?>
                <div class="installExists yesIntall">已安装</div>
              <?php }else{ ?>
                <div class="installExists noInstall">未安装</div>
              <?php }  ?>
            </div>
        </div>
      <div class="installButtonBox">
        <div class="installButtonPrev" @click="installPrevBtn">上一步</div>
        <div class="installButtonNext" @click="installNextBtn">
          <template v-if="installSetpValue == 4">开始安装</template>
          <template v-if="installSetpValue >= 5">完成安装</template>
          <template v-if="installSetpValue < 4">下一步</template>
        </div>
      </div>
    </div>
  </div>
  </body>
  <script>
    new Vue({
      el: '#installApp',
      data: function() {
        return {
          installSetpValue : 1,
          loadingBox : null 
        }
      },
      methods : {
        installPrevBtn(){

          if(this.installSetpValue >= 4){
            return;
          }

          this.installSetpValue--;
          if(this.installSetpValue <= 1){
            this.installSetpValue = 1;
          }
          $(".installContent").hide();
          $(".installSetp_"+this.installSetpValue).show();
        },
        installNextBtn(){

          var _this = this;

          this.installSetpValue++;
          if(this.installSetpValue >= 5){
            this.installSetpValue = 5;
          }

          if(this.installSetpValue < 4){
            $(".installContent").hide();
            $(".installSetp_"+_this.installSetpValue).show();
          }

          if(this.installSetpValue == 4){

            if($("#db_url").val()==""||$("#db_username").val()==""||$("#db_password").val()==""||$("#db_name").val()==""||$("#db_port").val()==""){
              _this.$alert('数据库配置项不能为空，请重新检查输入', '提示信息', {
                    confirmButtonText: '确定',
                    callback: action => {}
              });
              this.installSetpValue--
              return;
            }

            $.ajax({
              url: "http://127.0.0.1/easy_oa_atomic_layer/index.php/oaAction/dbConnection",
              data: {
                url      : $("#db_url").val(),
                username : $("#db_username").val(),
                password : $("#db_password").val(),
                dbname : $("#db_name").val(),
                port : $("#db_port").val(),
              },
              type: "POST",
              dataType: "json",
              beforeSend:function(){
                _this.loadingBox = _this.$loading({
                lock: true,
                text: '正在检测数据库配置...',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              },
              success: function(data) {
                _this.loadingBox.close();
                 if(data == '0'){
                  _this.$alert('数据库测试连接失败，请检查您的数据库相关配置', '提示信息', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                  _this.installSetpValue--
                 }else{
                  $(".installContent").hide();
                  $(".installSetp_"+_this.installSetpValue).show();
                  return;
                 }
              }
            });
          }

          if(this.installSetpValue == 5){

            $.ajax({
              url: "http://127.0.0.1/easy_oa_atomic_layer/index.php/oaAction/installOA",
              data: {
                url      : $("#db_url").val(),
                username : $("#db_username").val(),
                password : $("#db_password").val(),
                dbname : $("#db_name").val(),
                port : $("#db_port").val(),
              },
              type: "POST",
              dataType: "json",
              beforeSend:function(){
                _this.loadingBox = _this.$loading({
                lock: true,
                text: '正在安装，请稍候...',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              },
              success: function(data) {
                _this.loadingBox.close();
                 if(data == '0'){
                  _this.$alert('系统安装失败，请重新尝试', '提示信息', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                 }else{

                  $(".installContent").hide();
                  $(".installSetp_"+_this.installSetpValue).show();
                  
                 }
              }
            });
          }

          

        }
      }
    })
  </script>
</html>